<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理员库存管理</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../css/管理员库存管理.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">



</head>

<body class="bg-gray-100">
<!-- 侧边栏 -->
<div class="flex h-screen">
  <div class="sidebar bg-primary-dark text-primary-light w-64 p-4">
    <div class="logo mb-8">
      <h2 class="text-2xl font-bold">管理系统</h2>
    </div>
    <div class="nav-menu space-y-4">
      <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
        <i class="fas fa-shopping-cart mr-3"></i>
        <span><a href="管理员订单管理.html">订单管理</a></span>
      </div>
      <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
        <i class="fas fa-truck mr-3"></i>
        <span><a href="管理员运输管理.html">运输管理</a></span>
      </div>
      <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer active">
        <i class="fas fa-boxes mr-3"></i>
        <span><a href="管理员库存管理.html">库存管理</a></span>
      </div>
      <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
        <i class="fas fa-warehouse mr-3"></i>
        <span><a href="管理员仓库管理.html">仓库管理</a></span>
      </div>
      <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
        <i class="fas fa-users mr-3"></i>
        <span><a href="管理员用户管理.html">用户管理</a></span>
      </div>
      <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
        <i class="fas fa-cog mr-3"></i>
        <span><a href="管理员系统设置.html">系统设置</a></span>
      </div>
    </div>
  </div>
  <!-- 主内容区域 -->
  <div class="flex-1 overflow-y-auto">
    <!-- 头部 -->
    <div class="header bg-white shadow-md p-4 flex justify-between items-center">
      <div class="search-bar relative">
        <input type="text" placeholder="搜索..."
               class="border border-gray-300 rounded p-2 pr-10 w-64 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
        <i class="fas fa-search absolute right-3 top-3 text-gray-500"></i>
      </div>
      <div class="user-info flex items-center">
        <img src="https://picsum.photos/30/30" alt="用户头像" class="rounded-full mr-2">
        <span class="font-bold">管理员</span>
      </div>
    </div>
    <!-- 管理员工具栏 -->
    <div class="admin-toolbar bg-white p-4 shadow-md flex justify-between items-center">
      <div class="quick-stats flex space-x-8">
        <div class="stat-item stat-card">
          <i class="fas fa-boxes mr-3"></i>
          <div class="stat-value">150</div>
          <div class="stat-label text-gray-500">总库存数</div>
          <div class="stat-change"><i class="fas fa-arrow-up"></i> 5%</div>
        </div>
        <div class="stat-item stat-card">
          <i class="fas fa-exclamation-triangle mr-3"></i>
          <div class="stat-value">20</div>
          <div class="stat-label text-gray-500">库存预警</div>
          <div class="stat-change"><i class="fas fa-arrow-down"></i> 10%</div>
        </div>
        <div class="stat-item stat-card">
          <i class="fas fa-box-open mr-3"></i>
          <div class="stat-value">80</div>
          <div class="stat-label text-gray-500">今日入库</div>
          <div class="stat-change"><i class="fas fa-arrow-up"></i> 12%</div>
        </div>
        <div class="stat-item stat-card">
          <i class="fas fa-truck-loading mr-3"></i>
          <div class="stat-value">30</div>
          <div class="stat-label text-gray-500">今日出库</div>
          <div class="stat-change"><i class="fas fa-arrow-down"></i> 8%</div>
        </div>
      </div>
      <div class="action-buttons flex space-x-4">
        <button class="btn btn-primary-custom">导出库存数据</button>
        <button class="btn btn-success bg-green-500 text-white p-2 rounded hover:bg-green-600">生成库存报告</button>
      </div>
    </div>
    <!-- 仪表盘 -->
    <div class="dashboard p-4">
      <div class="dashboard-title flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold">库存管理仪表盘</h3>
        <div class="dropdown relative">
          <button class="btn btn-warning bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600">高级操作</button>
          <div class="dropdown-content rounded">
            <a href="#" class="block p-2 hover:bg-gray-200">批量导入库存</a>
            <a href="#" class="block p-2 hover:bg-gray-200">库存数据清理</a>
          </div>
        </div>
      </div>
      <div class="filter-bar flex space-x-4 mb-4">
        <div class="filter-group">
          <label for="product-category" class="block mb-1 font-bold">商品分类</label>
          <select id="product-category" class="w-full p-2 border rounded">
            <option value="all">全部</option>
            <option value="electronics">电子产品</option>
            <option value="clothing">服装</option>
            <option value="home">家居用品</option>
          </select>
        </div>
        <div class="filter-group">
          <label for="product-status" class="block mb-1 font-bold">库存状态</label>
          <select id="product-status" class="w-full p-2 border rounded">
            <option value="all">全部</option>
            <option value="in-stock">有库存</option>
            <option value="out-of-stock">无库存</option>
            <option value="low-stock">库存不足</option>
          </select>
        </div>
        <div class="flex items-end">
          <button class="btn btn-primary-custom h-10" onclick="applyFilters()">筛选</button>
          <button class="btn btn-secondary-custom h-10 ml-2" onclick="resetFilters()">重置</button>
        </div>
      </div>
      <table class="order-list bg-white shadow-md rounded mb-4">
        <thead>
        <tr>
          <th class="p-2 border-b">#</th>
          <th class="p-2 border-b">商品编号</th>
          <th class="p-2 border-b">商品名称</th>
          <th class="p-2 border-b">库存数量</th>
          <th class="p-2 border-b">库存状态</th>
          <th class="p-2 border-b">上次入库时间</th>
          <th class="p-2 border-b">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="p-2 border-b">1</td>
          <td class="p-2 border-b">P001</td>
          <td class="p-2 border-b">蜀绣</td>
          <td class="p-2 border-b">20</td>
          <td class="p-2 border-b"><span class="status status-in-stock">有库存</span></td>
          <td class="p-2 border-b">2025-04-01</td>
          <td class="p-2 border-b">
            <button class="btn btn-sm btn-primary-custom" onclick="openStockModal('P001', '蜀绣', 20, '有库存', '2025-04-01')">查看详情</button>
            <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
          </td>
        </tr>
        <tr>
          <td class="p-2 border-b">2</td>
          <td class="p-2 border-b">P002</td>
          <td class="p-2 border-b">竹编</td>
          <td class="p-2 border-b">0</td>
          <td class="p-2 border-b"><span class="status status-out-of-stock">无库存</span></td>
          <td class="p-2 border-b">2025-03-15</td>
          <td class="p-2 border-b">
            <button class="btn btn-sm btn-primary-custom" onclick="openStockModal('P002', '竹编', 0, '无库存', '2025-03-15')">查看详情</button>
            <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
          </td>
        </tr>
        <tr>
          <td class="p-2 border-b">3</td>
          <td class="p-2 border-b">P003</td>
          <td class="p-2 border-b">冰箱贴</td>
          <td class="p-2 border-b">5</td>
          <td class="p-2 border-b"><span class="status status-low-stock">库存不足</span></td>
          <td class="p-2 border-b">2025-04-03</td>
          <td class="p-2 border-b">
            <button class="btn btn-sm btn-primary-custom" onclick="openStockModal('P003', '冰箱贴', 5, '库存不足', '2025-04-03')">查看详情</button>
            <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
          </td>
        </tr>
        </tbody>
      </table>
      <!--分页栏-->
      <div class="pagination flex justify-between items-center mt-4">
        <div>
          <span id="currentPageInfo">当前第 1 页</span>
        </div>
        <div class="flex space-x-2">
          <button onclick="prevPage()" class="btn btn-secondary-custom">上一页</button>
          <div class="flex space-x-1 pagination-buttons">
            <!-- 动态生成页码按钮 -->
          </div>
          <button onclick="nextPage()" class="btn btn-secondary-custom">下一页</button>
        </div>
      </div>

    </div>
  </div>
</div>


<!-- 库存详情模态框 -->
<div id="stockModal" class="modal">
  <div class="modal-content bg-white p-4 rounded m-8 relative">
    <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeStockModal()">&times;</span>
    <h2 class="text-xl font-bold mb-4">库存详情</h2>
    <div class="order-detail">
      <div class="detail-section mb-4">
        <h3 class="text-lg font-bold mb-2">基本信息</h3>
        <div class="detail-row flex mb-1">
          <div class="detail-label w-1/4 font-bold">商品编号</div>
          <div class="detail-value w-3/4" id="stock-product-id"></div>
        </div>
        <div class="detail-row flex mb-1">
          <div class="detail-label w-1/4 font-bold">商品名称</div>
          <div class="detail-value w-3/4" id="stock-product-name"></div>
        </div>
      </div>
      <div class="detail-section mb-4">
        <h3 class="text-lg font-bold mb-2">库存信息</h3>
        <div class="detail-row flex mb-1">
          <div class="detail-label w-1/4 font-bold">库存数量</div>
          <div class="detail-value w-3/4" id="stock-quantity"></div>
        </div>
        <div class="detail-row flex mb-1">
          <div class="detail-label w-1/4 font-bold">库存状态</div>
          <div class="detail-value w-3/4" id="stock-status"></div>
        </div>
        <div class="detail-row flex mb-1">
          <div class="detail-label w-1/4 font-bold">上次入库时间</div>
          <div class="detail-value w-3/4" id="stock-last-in-time"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 编辑库存信息模态框 -->
<div id="editStockModal" class="modal">
  <div class="modal-content bg-white p-4 rounded m-8 relative max-w-2xl">
    <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeEditStockModal()">&times;</span>
    <h2 class="text-xl font-bold mb-4">编辑库存信息</h2>
    <form id="editStockForm">
      <input type="hidden" id="edit-product-id">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <div class="form-group">
          <label for="edit-product-name" class="block mb-1 font-bold">商品名称</label>
          <input type="text" id="edit-product-name" class="w-full p-2 border rounded">
        </div>
        <div class="form-group">
          <label for="edit-quantity" class="block mb-1 font-bold">库存数量</label>
          <input type="number" id="edit-quantity" class="w-full p-2 border rounded">
        </div>
        <div class="form-group">
          <label for="edit-status" class="block mb-1 font-bold">库存状态</label>
          <select id="edit-status" class="w-full p-2 border rounded">
            <option value="in-stock">有库存</option>
            <option value="out-of-stock">无库存</option>
            <option value="low-stock">库存不足</option>
          </select>
        </div>
        <div class="form-group">
          <label for="edit-last-in-time" class="block mb-1 font-bold">上次入库时间</label>
          <input type="date" id="edit-last-in-time" class="w-full p-2 border rounded">
        </div>
      </div>
      <div class="flex justify-end space-x-4">
        <button type="button" onclick="closeEditStockModal()" class="btn btn-secondary-custom">取消</button>
        <button type="button" onclick="saveStockChanges()" class="btn btn-primary-custom">保存</button>
      </div>
    </form>
  </div>
</div>

<!-- 批量导入库存模态框 -->
<div id="importStockModal" class="modal">
  <div class="modal-content bg-white p-4 rounded m-8 relative max-w-2xl">
    <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeImportStockModal()">&times;</span>
    <h2 class="text-xl font-bold mb-4">批量导入库存</h2>
    <div class="mb-4">
      <label class="block mb-2 font-bold">选择文件 (CSV格式)</label>
      <input type="file" id="stockFileInput" accept=".csv" class="w-full p-2 border rounded">
      <p class="text-sm text-gray-500 mt-1">请确保CSV文件包含商品编号、商品名称、库存数量、库存状态和上次入库时间列</p>
    </div>
    <div class="mb-4">
      <button onclick="downloadStockSampleCSV()" class="btn btn-secondary-custom">下载示例文件</button>
    </div>
    <div class="flex justify-end space-x-4">
      <button type="button" onclick="closeImportStockModal()" class="btn btn-secondary-custom">取消</button>
      <button type="button" onclick="importStockData()" class="btn btn-primary-custom">导入</button>
    </div>
  </div>
</div>
</body>
</html>
<script src="../js/管理员库存管理.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/jquery.js"></script>